import { InputNumber, InputNumberProps, Space } from "antd"
import { useEffect, useState } from "react"
import { UnitUtil } from "../../utils";
type MmInputNumberProps = React.PropsWithChildren<InputNumberProps<number>> & React.RefAttributes<HTMLInputElement>
export const MmInputNumber = (props: MmInputNumberProps) => {
    const [mmValue, setMmValue] = useState(0);
    const [pxValue, setPxValue] = useState(0);
    const mmOnChange = (value: number | null) => {
        if (mmValue != value) {//mm值改变
            setMmValue(value ?? 0);
            const px = UnitUtil.mmToPx(value ?? 0);
            setPxValue(px);
            props.onChange?.(px);
        }
    }
    useEffect(() => {
        if (props.value != pxValue) {//px值改变 
            setMmValue(UnitUtil.pxToMm(props.value ?? 0));
            setPxValue(props.value ?? 0);
        }
    }, [props.value])
    return <Space style={{ width: '100%' }}><InputNumber
        {...props}
        value={pxValue}
        suffix="px"
    /><InputNumber
            {...props}
            onChange={mmOnChange}
            value={mmValue}
            suffix="mm"
        /></Space>
}